<#assign pageTitle="${picture.title!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/picture.css" />
</#assign>
<#assign pageContent>
    <van-nav-bar
            :title="title"
            left-text="返回"
            right-text="首页"
            left-arrow
            @click-left="window.location.href='/picture/index.html';"
            @click-right="window.location.href='/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="picture-view">
        <img src="${picture.viewUrl!}" alt="">
        <div class="picture-title">
            <#if picture.levelId gt 0>
                <i class="is-vip">VIP专享</i>
            </#if>
            <span>${picture.title!}</span>
        </div>
        <div class="infos">
            <h6>素材详情：</h6>
            <div class="item">
                <div>
                    <span>专业</span>
                    <span>${subjectName!}</span>
                </div>
                <div>
                    <span>分类</span>
                    <span>${picture.categoryName!}</span>
                </div>
            </div>
            <div class="item">
                <div>
                    <span>文件格式</span>
                    <span>${picture.fileExt!}</span>
                </div>
                <div>
                    <span>文件大小</span>
                    <span>${picture.fileSize/1024/1024}M</span>
                </div>
            </div>
            <div class="item">
                <div>
                    <span>图片像素</span>
                    <span>${picture.imgWidth!} x ${picture.imgHeight!}</span>
                </div>
                <div class="text-one">
                    <span>上传时间</span>
                    <span >${picture.createTime!}</span>
                </div>
            </div>
        </div>
        <div class="main-item">
            <div class="box-title">
                <div class="title-name">来自相同主题的作品</div>
            </div>
            <div class="picture-list">
                <#if pictureList?? && pictureList?size gt 0>
                        <#list pictureList as item>
                        <a class="picture-item" href="/picture/view/${item.id!}.html">
                            <div class="picture-img"><img src="${item.viewUrl!}" alt=""></div>
                            <div class="picture-name text-one">${item.title!}</div>
                        </a>
                        </#list>
                </#if>
            </div>
        </div>
    </div>
    <div class="view-content-footer">
        <van-goods-action-icon round type="default" :icon="isFavorite ? 'star' : 'star-o'" color="#ff5000" class="btn-favorite" @click="doFavorite()">收藏</van-goods-action-icon>
        <van-button round color="linear-gradient(to right, #fcb338, #ff6e29)" class="btn-buy" @click="doPicture()">查看原图</van-button>
    </div>
    <van-popup
            v-model="vipPopup"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '550px' }"
    >
        <iframe src="/order/member.html" width="100%" height="100%"></iframe>
    </van-popup>
</#assign>
<#assign pageScript>
    <script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
<script>
    var pictureId = ${picture.id};
    var userId = ${userId};
    var isVip = ${isVip?c};
    var title = "${picture.title!}";
    new Vue({
        el: '#app',
        data() {
            return {
                showFooter: false,
                activeTab: 0,
                active: 0,
                title: title,
                vipPopup: false,
                isFavorite: ${isFavorite?c}
            }
        },
        created() {

        },
        methods: {
            doPicture() {
                var that = this;
                axios.get("/picture/download.json", {
                    params: {
                        id: pictureId
                    }
                }).then(function (json) {
                    if (json.data.code === 0) {
                        var a = document.createElement('a');
                        a.href = json.data.data;
                        a.download = that.title;
                        a.click();
                    } else {
                        that.doBuyVip();
                    }
                }).catch(function (error) {
                    that.$toast('错误，请与管理员联系！');
                });
            },
            doFavorite() {
                if (userId <= 0) {
                    return this.toLogin();
                }
                var that = this;
                var url = '';
                if (that.isFavorite) {
                    url = '/ajax/favorite/delete.json';
                } else {
                    url = '/ajax/favorite/add.json';
                }
                axios.get(url, {
                    params: {
                        infoId: pictureId,
                        typeId: 4
                    }
                }).then(function (json) {
                    if (json.data.code === 0) {
                        that.isFavorite = !that.isFavorite;
                    }
                    that.$toast(json.data.msg);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            doBuyVip() {
                if (userId <= 0) {
                    return this.toLogin();
                }
                if (isVip === false) {
                    this.vipPopup = true;
                } else {
                    //   window.location.href = '/order/member.html';
                }
            },
            toLogin() {
                this.$toast({
                    message: '正在跳转登录中，请稍后...',
                    duration: 1000,
                    onClose: function () {
                        window.location.href = '/auth/login.html';
                    }
                });
            },
            //筛选条件
        }
    });
</script>
</#assign>
<#include "../layout_h5.ftl" />